<template>
  <div class="listInfo">
    <ul>
      <li
          v-for="item in InfoList"
          :key="item.id"
          @click="toBusinessList"
      >
        <div class="food">
          <div><img :src="item.imgUrl"></div>
          <span>
            {{item.title}}
          </span>
        </div>
      </li>
    </ul>

  </div>
</template>

<script setup>
import router from "@/router";

const InfoList = [
  {
    id:1,
    imgUrl : '/images/水果捞.jpg',
    title: '美食'
  },
  {
    id:2,
    imgUrl : '/images/饺子.jpg',
    title: '早餐'
  },
  {
    id:3,
    imgUrl : '/images/跑腿.jpg',
    title: '跑腿'
  },
  {
    id:4,
    imgUrl :'/images/汉堡.jpg',
    title: '汉堡'
  },
  {
    id:5,
    imgUrl : '/images/果茶.jpg',
    title: '甜品'
  },
  {
    id:6,
    imgUrl : '/images/速食.jpg',
    title: '速食'
  },
  {
    id:7,
    imgUrl : '/images/小吃.jpg',
    title: '小吃'
  },
  {
    id:8,
    imgUrl : '/images/米粉.jpg',
    title: '米粉'
  },
  {
    id:9,
    imgUrl : '/images/包子.jpg',
    title: '包子'
  },
  {
    id:10,
    imgUrl : '/images/串.jpg',
    title: '炸串'
  }
]
function toBusinessList(){
  router.push({path:'/BusinessList', query:{ id:InfoList[0].id }})
}
</script>

<style scoped>
.listInfo {
  width: 100%;
  height: 150px;
  margin-top: 30px;
}
.listInfo ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  list-style: none;
  align-items: center;
  height: 100%;
  padding-inline-start:0;
}
.listInfo ul li {
  display: flex;
  flex-direction: column;
  /*align-items: center;*/
  text-align: center;
  justify-content: space-around;
  align-items: center;
}
.listInfo ul li img {
  width: 3rem;
  height: 3rem
}
.listInfo ul li span {
  font-size: 15px;
}
.food {
  height: 70px;
  width: 70px;
  /*background-color: yellowgreen;*/
}
</style>